<template>
    <div>
       <header>
           <div>
               <p>我的</p>
           <i @click="back" class="iconfont">&#xe663;</i>
           </div>
           <div @click="qu">
               <img v-show="!moImg" :src="users.user_img?($image+users.user_img):($image+img)" alt="">
               
               <div>
                   <p>{{users.username?users.username:user}}</p>
                   <p>
                       <i class="iconfont">&#xe6e7;</i>
                       <em class="xiao">{{users.phone?users.phone:msg}}</em>
                   </p>
               </div>
               <i class="iconfont" style="color:white;font-size:18px">&#xe638;</i>
           </div>
           
       </header>
       <main>
           <section>
               <div>
               <p><span >0.00</span>元</p>
               <i>我的余额</i>
           </div>
           <div @click="hongbao">
               <p><span style="color:red">{{users.hong}}</span>个</p>
               <i>我的优惠</i>
           </div>
           <div>
               <p><span style="color:green">0</span>分</p>
               <i>我的积分</i>
           </div>
           </section>
           <ul>
               <li>
                   <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-dingdan"></use>
</svg>
                   <div>
                       <p>我的订单</p>
                   <i class="iconfont">&#xe638;</i>
                   </div>
                   
               </li>
               <li>
                   <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-jifenshangcheng"></use>
</svg>
                   <div>
                       <p>积分商城</p>
                   <i class="iconfont">&#xe638;</i>
                   </div>
                   
               </li>
                <li>
                   <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-huangguan"></use>
                    </svg>
                   <div>
                       <p>水滴会员卡</p>
                   <i class="iconfont">&#xe638;</i>
                   </div>
                   
               </li>
           </ul>
           <ul>
               <li>
                   <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-fuwuzhongxin"></use>
</svg>
                   <div>
                       <p>服务中心</p>
                   <i class="iconfont">&#xe638;</i>
                   </div>
                   
               </li>
                <li>
                  <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-shuidihdpi"></use>
</svg>
                   <div>
                       <p>{{users.username}}下载滴水App</p>
                   <i class="iconfont">&#xe638;</i>
                   </div>
                   
               </li>
                
           </ul>
           
       </main>
         <footer v-if="login1">
             <van-circle layer-color="#eee" v-model="currentRate" :rate="currentRate" :speed="100" :text="text" />
             <p>个人资料完善度</p>
         </footer>
        
    </div>
</template>

<script>
import { ajax_login  } from '../ajax'
import { mapState} from 'vuex'
export default {
    data(){
        return{
            user:'登录/注册',
            msg:'暂无绑定手机号',
            moImg:'',
            honbao:0,
            currentRate: 70,
            img:"defalut.png"
        }
    },
    components:{
      
    },
    computed:{
        ...mapState(['login1','users']),
        text() {
          return this.currentRate.toFixed(0) + '%';
        },
    },
    created(){
    //  console.log(this.users.password)
    },
    methods:{
         back(){
          this.$router.push('/')
        },
        qu(){
            if(this.login1){
               this.$router.push('/ziLiao');
            }else{
               this.$router.push('/login')
            }
           
        },
        denglu(){
            console.log('fei')
            // if(this.$route.query.username){
            //     console.log(this.$route.query.username);
            //     ajax_login({
            //         username:`${this.$route.query.username}`,
            //         password:`${this.$route.query.password}`,
            //         captcha_code:`${this.$route.query.yan}`,
            //     }).then(data=>{
            //         console.log(data);
            //         this.user=data.username;
            //         this.honbao=data.gift_amount;
                    
            //     })
               
            // };
        },
        hongbao(){
            this.$router.push('/honBao');
        }
    },

    beforeRouteEnter (to, from, next) {
        
         
         next(vm=>{
            // console.log(to,vm);
            // vm.user=to.query.username;
            // vm.honbao=to.query.gift_amount;
            //   if(vm.$route.query.username){
            //     // console.log(vm.$route.query.username);
            //     ajax_login({
            //         username:`${vm.$route.query.username}`,
            //         password:`${vm.$route.query.password}`,
                   
            //     }).then(data=>{
            //         // console.log(data);
            //         vm.user=data.data[0].username;
            //         vm.honbao=3;
                    
            //     })
             
            // };
         }
             
         )
    },
    watch:{
        // "$route":"denglu",
        // $route(newValue,oldValue){
        //     console.log(newValue);
        // }
    }

}
</script>

<style scoped>
header{
    width: 100vw;
    /* background-color: #3190e8; */
    background-image: linear-gradient(to right top,rgb(61, 61, 150),#1606f1,orange);

}
header>div:first-child{
    width: 94vw;
    padding: 1vh 3vw;
    text-align: center;
    position: relative;
    color: white;
    font-size: 20px;
}
header>div:first-child>p{
    font-size: 20px;
}
header>div:first-child>i{
    position: absolute;
    top:1vh;
    left: 1vh;
}
header>div:last-child{
    width: 92vw;
    margin: 0 auto;
    padding:1.8vh 0;
    display: flex;
    align-items: center;
    
}
header>div:last-child>div{
    width:78vw;
    margin-left: 4vw;
    color: white;
    
}
header>div:last-child>div>p{
    font-size: 18px;
    margin: 5px 0;
}
.xiao{
    font-size: 14px;
}
header img{
    width:20vw;
    height:20vw;
    border-radius: 50%;
    /* outline: 6px solid rgb(192, 168, 168);
    -moz-outline-radius:50%; */

}
main{
    width: 100vw;
    background-color: #f5f5f5;
}
main section{
    display: flex;
    background-color: white;
}
main section>div{
    width: 33vw;
    height: 20vw;
    text-align: center;
    border-right: 1px solid rgb(221, 214, 214);
    /* line-height: 20vw; */
    
}
main section>div:last-child{
    border: 0;
}
section p{
    padding: 1vh 0;
    
}

section span{
    font-size: 30px;
    font-weight: 700;
    color: orange;

}

ul{
    width: 100vw;
    margin: 10px 0;
    background-color: white;
}
ul li{
    width: 96vw;
    margin: 0 auto;
    height: 6vh;
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
}
ul li>div{
    margin-left: 8px;
    width: 90vw;
    padding: 1.8vh 0;
    display:flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(240, 232, 232);
}
footer{
    width: 100vw;
    margin: 2vw auto;
    text-align: center;
}
</style>